webpack+angular的项目SEED(上)

介绍

首先项目要先决定框架，组件化的前端是一个趋势方向，只是组件化的前端项目开发需要一个从发布到测试的流程化管理，所以决定自己开始构建一个webpack+angular的项目SEED。方便以后自己的项目构建和开发。

文件结构

决定了组件化开发就第一个需要决定的就是项目的目录结构

.
├── app   //项目源文件夹
│   ├── page        //页面文件夹
│   ├── widgets     //组件文件夹
│   ├── index.html  //项目入口页
│   ├── app.Sper.js //项目入口JS测试文件
│   └── app.js      //项目入口JS文件
└── bin   //项目打包文件夹
└── E2E   //E2E测试文件夹
└── gulp  //gulp任务文件夹
│   ├── config.js
│   └── task        //GULP任务文件夹
└── node_modules    //nodejs的LIB

GULP任务

决定了项目文件结构以后就要开始考虑需要GULP做那些任务了，第一个便是写gulp的一些配置方便自己以后维护。

config.js

var VERSION = require('../package.json').version;
var serve = require('browser-sync');
var path = require('path');
var root = 'app';    
function resolveToApp(files) {
    return path.join(root, files);
}
module.exports = {
    banner: '/*!\n'
    +' * zchq88_seed\n'
    +' * @license MIT\n'
    +' * v' + VERSION + '\n'
    +' */\n',
    output: 'bin',
    entry: 'app/app.js',
    root: root,
    paths: {
        js: resolveToApp('/**/*!(.spec.js).js'),
        html: resolveToApp('**/*.html'),            
        styl: resolveToApp('**/*.styl')
    },
    serve: serve
};
  

然后需要做的就是WEBPACK打包，HTML模板的复制到BIN，清理BIN文件夹，WATCH热调试代码这些任务。
在这些GULP任务中最主要的就是WATCH这个任务了，它关系到实时编译调试代码。

watch.js

var gulp = require('gulp');
var gutil = require('gulp-util');
var config = require('../config');// gulp公共配置
var path = require('path');

exports.task = function () {
    config.serve({
        port: process.env.PORT || 3000,
        open: false,
        server: {baseDir: config.output}
    });
    gutil.log(gutil.colors.red('server启动'));
    var reload = function () {
        return config.serve.reload();
    };
    var webpackPaths = [].concat([config.paths.js], [config.paths.styl]);
    gulp.watch(config.paths.html, ['html',reload]);
    gulp.watch(webpackPaths, ['webpack']);
    gulp.watch(path.join(config.output, '**/*.js'), reload);
};

这里就不得不说browser-sync这个工具了。这个工具直接提高的代码的开发效率。我再这里使用的只是他的热调试功能。实时的WATCH和刷新页面，这里就有一个小坑，就是GULP的TASK串行并行问题，造成JS文件修改webpack还没有编译生成完成就执行了reload，造成JS文件修改不能实时反应到浏览器上。所以我把监视APP的js，修改成监视输出目录的JS来刷新页面，这样就可以等webpack任务完成后再刷新页面了。

webpack配置

因为在这个项目中想使用了angularjs和ES6所以需要nodejs安装ng-annotate-loader和babel-loader来加载JS和编译JS文件。（ES6的使用只是测试性的，因为实际项目中ES6的代码调试困难。浏览器调试一般都是编译后的文件。所以还需要自己定位源代码的错误位置，虽然有sourcemap之类的可以解决代码定位问题，但是断点调试什么的也会比较麻烦。）CSS我选择Stylus。其实用CSS的预处理框架看习惯。我个人因为CSS多数使用的是Bootstrap里面的，所以对CSS改动比较少无所谓用什么。你们可以根据自己的习惯修改。

webpack.config.js

module.exports = {
    devtool: 'false',
    entry: './app/app.js',
    output: {
        filename: 'app.js'
    },
    module: {
        loaders: [
            {test: /\.js$/, exclude: [/app\/lib/, /node_modules/], loader: 'ng-annotate!babel'},
            {test: /\.html$/, loader: 'raw'},
            {test: /\.styl$/, loader: 'style!css!stylus'},
            {test: /\.css$/, loader: 'style!css'}
        ]
    }
};

webpack也带来一个问题就是文件打包问题，打包成一个文件的时候记得分离ANGULAR等框架文件，毕竟这些文件都有CDN。打包进WEBPACK里面的话会照成很大的一个文件需要下载。动态打包方面的资料可以去WEBPACK 官方文档里面看，不过好像现在还没有对ES6的支持。ES6的使用很多时候只能说问道前端开发，对于公司项目的使用还是要多多的考量的，也许还需要等等浏览器的支持，更多好工具的配合。不过ES6的的使用应该是一个趋势。

下篇内容

以上主要是项目生产方面的一些内容，当然还有项目需要有项目测试方面的内容才能够比较好的维护和开发项目。这方面的内容会在以后在写自己的心得。

有兴趣的可以去zchq88_seed这个项目看看，里面已经含有KARMA的单元测试和protractor的E2E测试例子。

webpack+angular的项目SEED(下)